<!--
* Description: 字典修改页面
* Company: 联宝（合肥）电子科技有限公司
* Author: Dongxu.Ni
* Date: 2020/3/5 15:14
-->
<template>
  <div v-loading="isRequesting">
    <!--数据表单-->
    <el-form label-width="80px" :model="formData" size="mini">
      <el-row>
        <el-col :span="24" style="padding: 0">
          <!--字典大类-->
          <el-form-item
            :label="$t('DictManager.parentDict')"
            style="background: #c9d2ca;text-align: right"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <!--字典代码输入框-->
          <el-form-item :label="$t('DictManager.dictCode')">
            <el-input v-model="formData.code" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <!--字典中文简体值输入框-->
          <el-form-item :label="$t('DictManager.valueZhCn')">
            <el-input v-model="formData.valueZhCn" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <!--字典中文繁体值输入框-->
          <el-form-item :label="$t('DictManager.valueZhTw')">
            <el-input v-model="formData.valueZhTw" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <!--字典英文值输入框-->
          <el-form-item :label="$t('DictManager.valueEn')">
            <el-input v-model="formData.valueEn" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row />
      <el-row>
        <el-col :span="24" style="padding: 0">
          <!--字典小类-->
          <el-form-item
            :label="$t('DictManager.subDict')"
            style="background: #c9d2ca;text-align: right"
          >
            <!--添加按钮-->
            <el-button
              size="mini"
              style="padding-right: 10px;background: #c9d2ca;color: black"
              @click="clickAdd"
            >
              {{ $t('button.add') }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--字典小类数据表格-->
        <el-table border :data="tableData" height="240px">
          <!--字典代码列-->
          <el-table-column align="center" :label="$t('DictManager.dictCode')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.code" size="mini" />
            </template>
          </el-table-column>
          <!--字典中文简体值列-->
          <el-table-column align="center" :label="$t('DictManager.valueZhCn')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.valueZhCn" size="mini" />
            </template>
          </el-table-column>
          <!--字典中文繁体值列-->
          <el-table-column align="center" :label="$t('DictManager.valueZhTw')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.valueZhTw" size="mini" />
            </template>
          </el-table-column>
          <!--字典英文值列-->
          <el-table-column align="center" :label="$t('DictManager.valueEn')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.valueEn" size="mini" />
            </template>
          </el-table-column>
          <!--操作列-->
          <el-table-column align="center" :label="$t('table.operate')">
            <template slot-scope="scope">
              <!--删除按钮-->
              <el-button size="mini" type="danger" @click="rowDelete(scope.$index)">
                {{ $t('button.delete') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
import { dictList, dictBatchEdit } from '../../../../api/sys/dict'
export default {
  name: 'DictEdit',
  props: {
    inputData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isRequesting: true,
      formData: {},
      tableData: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.pageInit()
  },
  methods: {
    async pageInit() {
      // 将props传入的值复制给data的值
      this.formData = JSON.parse(JSON.stringify(this.inputData))
      // 通过字典大类的代码查询字典小类列表
      try {
        this.isRequesting = true
        const response = await dictList({ parentCode: this.formData.code })
        this.tableData = response.data
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    async save() {
      try {
        this.isRequesting = true
        const data = [this.formData].concat(this.tableData)
        await dictBatchEdit(data)
        this.$emit('save')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    },
    clickAdd() {
      this.tableData.push({ parentCode: this.formData.code, order: this.tableData.length })
    },
    rowDelete(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>

<style scoped></style>
